<template>
  <view>
    <view class="hrader">
      <image
        src="../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      发布
    </view>
    <view class="interval">
      <!-- 选择话题 -->
      <view class="select">
        <view class="select_left">
          <image
            src="../../static/closexy.png"
            class="closexy"
            mode="widthFix"
          ></image>
          <text>选择话题</text>
        </view>
        <view
          class="select_left"
          style="color: #999; font-size: 26rpx"
          @click="open"
        >
          <view ref="model">{{ Choosetopic }}</view>
          <image src="../../static/x92.png" class="selectImg"></image>
        </view>
      </view>
      <!-- 内容 -->
      <view class="content">
        <textarea
          value=""
          v-model="content"
          placeholder="分享您的想法..."
          class="contenText"
          maxlength="1000000000"
        />
        <g-upload
          ref="gUpload"
          :mode="imgList"
          @imgDelete="imgDelete"
          @chooseFile="chooseFile"
          :control="true"
          :columnNum="3"
          :maxCount="9"
        ></g-upload>
      </view>
      <view class="btn" @click="release">发布</view>
    </view>

    <!-- 弹窗 -->
    <uni-popup ref="popup" type="bottom">
      <view class="selectPopup">
        <view class="selectPopup_one">
          <image
            src="../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="close"
          ></image>
          <text style="margin: 0 auto">选择话题</text>
        </view>
        <!-- 搜索 -->
        <view class="search">
          <image
            src="../../static/Shopping/sous.png"
            class="searchImg"
            mode=""
          ></image>
          <input
            type="text"
            value=""
            v-model="searchcontent"
            confirm-type="search"
            placeholder="请输入想搜索的话题"
            class="searchInp"
            @confirm="search"
          />
        </view>
        <!-- 列表 -->
        <view
          class="popList"
          v-for="(popup, index) in ConversationList"
          :key="index"
          @click="choice(popup)"
        >
          <view class="line">
            <image
              :src="$IMG_URL + popup.cover_image"
              class="userImg"
              mode="aspectFill"
            ></image>
            <view class="popText">
              <view class="rowp">
                <text>#</text>
                <text>{{ popup.title }}</text>
              </view>
              <view class="nump">
                <image class="cany" src="../../static/canyIcon.png" mode="" />
                {{ popup.joinNum }}人参与
              </view>
            </view>
          </view>
          <text class="popTextOne">{{ popup.content }}</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import uniPopupMessage from "@/components/uni-popup/uni-popup-message.vue";
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue";
import gUpload from "@/components/g-upload/g-upload.vue";
export default {
  data() {
    return {
      Choosetopic: "请你选择合适的话题吧~",
      count: 9,
      name: "", //必填
      url: "", //必填
      header: {},
      imgs: "",
      imgList: [],
      ConversationList: [],
      picurl: "", // 上传图片地址
      topicId: "", // 话题ID
      content: "", // 文章内容
      token: "",
      imgarr: [],
      searchcontent: "",
    };
  },
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog,
    gUpload,
  },
  onShow() {
    this.getconversationList();
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
  },

  methods: {
    //返回社区
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //打开弹窗
    open() {
      this.$refs.popup.open();
    },
    //关闭弹窗
    close() {
      this.$refs.popup.close();
    },
    // 获取话题列表
    async getconversationList() {
      let that = this;
      const res = await that.$myRequest({
        url: "index/getTopic",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {},
      });

      if (res.data.code == 1) {
        this.ConversationList = res.data.data.data;
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
    // 搜索
    async search() {
      let that = this;
      const res = await that.$myRequest({
        url: "index/search",
        method: "GET",
        header: {
          token: that.token,
        },
        data: {
          keyWord: that.searchcontent,
          type: 1,
        },
      });

      if (res.data.code == 1) {
        that.ConversationList = res.data.data.data;
        console.log(that.ConversationList);
      }
    },

    // 选择话题
    choice(popup) {
      console.log(popup);
      this.$refs.popup.close();
      this.Choosetopic = popup.title;
      this.topicId = popup.id;
      this.$refs.model.$el.style.color = "#DD524D";
    },
    // 图片上传
    chooseFile(list, v) {
      // console.log(v)
      this.uploadFileToServe(v);
    },
    // 图片删除
    imgDelete(list, eq) {
      let that = this;
      console.log(that.imgarr);
      // console.log("删除图片_list：", list)
      console.log("删除图片_eq：", eq);

      that.imgarr.splice(eq, 1);
    },

    uploadFileToServe(urlList) {
      let that = this;
      if (!urlList || urlList.length <= 0) {
        return;
      }

      for (let i = 0; i < urlList.length; i++) {
        uni.uploadFile({
          url: "https://www.123qifu.com/api/common/upload", //仅为示例，非真实的接口地址
          header: {
            token: that.token,
          },
          filePath: urlList[i],
          name: "file",
          formData: {},
          success: (uploadFileRes) => {
            const list = JSON.parse(uploadFileRes.data);
            const str = list.data.url;
            that.imgarr.push(str);
            console.log(that.imgarr);
          },
        });
      }
    },
    // 文章发布
    async release() {
      let that = this;
      that.picurl = that.imgarr.toString();
      if (that.Choosetopic == "请你选择合适的话题吧~") {
        uni.showToast({
          title: "请选择合适的话题~",
          icon: "none",
        });
      } else if (that.content == "" && that.picurl == "") {
        uni.showToast({
          title: "发布内容不能为空",
          icon: "none",
        });
      } else {
        const res = await that.$myRequest({
          url: "index/AddArticle",
          method: "POST",
          header: {
            token: that.token,
          },
          data: {
            topicId: that.topicId,
            content: that.content,
            images: that.picurl,
          },
        });
        if (res.data.code == 1) {
          uni.showToast({
            title: res.data.msg,
            duration: 1000,
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "../community/community",
            });
          }, 2000);
        }
      }
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.interval {
  padding-top: 88rpx;
}
.select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  padding: 0 30rpx;
  box-sizing: border-box;

  .select_left {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #c52b2e;
    letter-spacing: 2rpx;

    .closexy {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
    }

    .selectImg {
      width: 12rpx;
      height: 20rpx;
      margin-left: 13rpx;
    }
  }
}
.content {
  width: 100%;
  min-height: 570rpx;
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
  .contenText {
    width: 100%;
    height: 250rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
  }
  /deep/.imglistbx {
    margin-top: 30rpx;
  }
}
.btn {
  width: 350rpx;
  height: 74rpx;
  background: #c52b2e;
  border-radius: 37rpx;
  text-align: center;
  line-height: 74rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  margin: 100rpx auto;
}

.selectPopup {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 1000rpx;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 22rpx 22rpx 0 0;

  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 100rpx;
    width: 100%;
    font-size: 34rpx;
    color: #333333;
    box-sizing: border-box;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #eee;
    .clos {
      width: 24rpx;
    }
  }
  .search {
    display: flex;
    align-items: center;
    width: 714rpx;
    background-color: #f4f4f4;
    height: 64rpx;
    border-radius: 32rpx;
    margin: 40rpx auto 12rpx;
    box-sizing: border-box;

    .searchImg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 22rpx;
    }

    .searchInp {
      flex: 1;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      box-sizing: border-box;
      padding: 0 22rpx;
    }
  }
  .popList {
    width: 702rpx;
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;
    padding: 28rpx 0;
    margin: 0 auto;
    .line {
      display: flex;
      align-items: center;
    }
    .userImg {
      width: 90rpx;
      height: 90rpx;
      margin-right: 25rpx;
      border-radius: 4rpx;
    }
    .popText {
      display: flex;
      flex: 1;
      flex-direction: column;
      .rowp {
        display: flex;
        align-items: center;
        text:nth-child(1) {
          font-size: 30rpx;
          color: #c52b2e;
          margin-right: 5rpx;
        }
      }
      .nump {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
        margin-top: 10rpx;
        .cany {
          display: block;
          width: 18rpx;
          height: 18rpx;
          margin-right: 10rpx;
        }
      }
    }
    .popTextOne {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      padding-top: 28rpx;
    }
  }
  .popList:last-child {
    border-bottom: none;
  }
}
</style>
